<nz-spin [nzSpinning]="isSpinning">
    <section class="dashboard_container">
        <!--侧边栏-->
        <!--<quick-menu>-->
        <!--<nz-list [nzBordered]="false" [nzSplit]="false">-->
        <!--<nz-list-item>-->
        <!--<a routerLink="/">Home</a>-->
        <!--</nz-list-item>-->
        <!--<nz-list-item>-->
        <!--<a routerLink="/widgets">Widgets</a>-->
        <!--</nz-list-item>-->
        <!--<nz-list-item>-->
        <!--<a routerLink="/style/typography">typography</a>-->
        <!--</nz-list-item>-->
        <!--<nz-list-item>-->
        <!--<a routerLink="/style/gridmasonry">gridmasonry</a>-->
        <!--</nz-list-item>-->
        <!--<nz-list-item>-->
        <!--<a routerLink="/pro/result/success">success result</a>-->
        <!--</nz-list-item>-->
        <!--</nz-list>-->
        <!--</quick-menu>-->
        <section class="dashboard_content">
            <!--图表-->
            <section nz-row nzGutter="16">
                <div nz-col nzXs="24" nzSm="12" nzMd="6" class="mb-md">
                    <div nz-row nzType="flex" nzAlign="middle" class="bg-primary rounded-md">
                        <div nz-col nzSpan="12" class="p-md text-white">
                            <div class="h2 mt0">{{ariticeData.ariticeTotal}}</div>
                            <p class="text-nowrap mb0">文章总数</p>
                        </div>
                        <!--<div nz-col nzSpan="12">-->
                        <!--<g2-mini-bar height="35" color="#fff" borderWidth="3" [padding]="[36, 30, 30, 30]" [data]="webSite"></g2-mini-bar>-->
                        <!--</div>-->
                    </div>
                </div>
                <div nz-col nzXs="24" nzSm="12" nzMd="6" class="mb-md">
                    <div nz-row nzType="flex" nzAlign="middle" class="bg-success rounded-md">
                        <div nz-col nzSpan="12" class="p-md text-white">
                            <div class="h2 mt0">100</div>
                            <p class="text-nowrap mb0">访问量</p>
                        </div>
                        <!--<div nz-col nzSpan="12">-->
                        <!--<g2-mini-bar height="35" color="#fff" borderWidth="3" [padding]="[36, 30, 30, 30]" [data]="webSite"></g2-mini-bar>-->
                        <!--</div>-->
                    </div>
                </div>
                <div nz-col nzXs="24" nzSm="12" nzMd="6" class="mb-md">
                    <div nz-row nzType="flex" nzAlign="middle" class="bg-orange rounded-md">
                        <div nz-col nzSpan="12" class="p-md text-white">
                            <div class="h2 mt0">{{ariticeData.ariticeTotal}}</div>
                            <p class="text-nowrap mb0">热门文章</p>
                        </div>
                        <!--<div nz-col nzSpan="12">-->
                        <!--<g2-mini-bar height="35" color="#fff" borderWidth="3" [padding]="[36, 30, 30, 30]" [data]="webSite"></g2-mini-bar>-->
                        <!--</div>-->
                    </div>
                </div>
                <div nz-col nzXs="24" nzSm="12" nzMd="6" class="mb-md">
                    <div nz-row nzType="flex" nzAlign="middle" class="bg-magenta rounded-md">
                        <div nz-col nzSpan="12" class="p-md text-white">
                            <div class="h2 mt0">456</div>
                            <p class="text-nowrap mb0">本月新增文章</p>
                        </div>
                        <!--<div nz-col nzSpan="12">-->
                        <!--<g2-mini-bar height="35" color="#fff" borderWidth="3" [padding]="[36, 30, 30, 30]" [data]="webSite"></g2-mini-bar>-->
                        <!--</div>-->
                    </div>
                </div>
            </section>
            <!--折线图-->
            <section class="line-chart--container">
                <!--访客量-->
                <div class="visitor-volume--container" id="visitor-volume--container">
                    <div id="visitor-volume--chart">

                    </div>
                    <p>最近七日访客量</p>
                </div>
                <!--新增文章数量-->
                <div class="add-article--container">
                    <div id="add-article--chart">

                    </div>
                    <p>最近新增文章数量</p>
                </div>
            </section>
        </section>
    </section>
</nz-spin>


<!--<p>{{ariticeData.ariticeTotal}}</p>-->
<!--<p>文章总数</p>-->
